<template>
    <div class="friendListContainer">
        <UserList :friend-list="props.friendList"
                @showUserInfo="showUserInfo"
                @show-application-list-content="showApplicationListContent"
                @show-new-friend-info="showNewFriendInfo"
                @show-default="showDefault"
                 ></UserList>
        <component v-if="currentContent != -1"  
                    :userInfo="userInfo"
                    :newFriendInfo="newFriendInfo"
                    :applicationList="applicationList"
                    @chatWith="chatWith"
                    :is="components[currentContent]" ></component>
    </div>
</template>
<script setup lang="ts">
import UserList from '@/components/UserList.vue';
import NewFriendInfoContent from '@/components/content/NewFriendInfoContent.vue';
import UserInfoContent from '@/components/content/UserInfoContent.vue';
import FriednApplicationContent from '@/components/content/FriendApplicationContent.vue'
import { ref } from 'vue';
import type { Relationship } from '@/types';
const props = defineProps<{
    friendList:Array<Relationship>
    applicationList:Array<any>
}>()
const emit = defineEmits<{
    (ev:'addFriend',friendName:string):void
    (ev:'chatWith',friendName:Relationship):void
}>()
const components = [
    UserInfoContent,
    NewFriendInfoContent,
    FriednApplicationContent
]
const userInfo = ref<Relationship>()
const newFriendInfo = ref()
const currentContent = ref(-1)
const showUserInfo =(relationship:Relationship) => {
    currentContent.value = 0
    userInfo.value = relationship
}
const showApplicationListContent = () => {
    currentContent.value = 2
}
const showNewFriendInfo =(userName:string) => {
    currentContent.value = 1
    newFriendInfo.value = {
        userName,
        type:'mock'
    }
}
const showDefault = () => {
    currentContent.value = -1
}
// <!-- @addFriend="addFriend" -->
const addFriend = (friendName:string) => {
    emit('addFriend',friendName)
}
const chatWith = (userInfo:Relationship) => {
    emit('chatWith',userInfo)
}
</script>
<style scoped>
.friendListContainer{
    flex: 1;
    display: flex;
    flex-direction: row;
}
</style>